<template>
  <div class="block-box">
    <div class="corner-lb"></div>
    <div class="corner-rb"></div>
    <h3 class="task-title">
      <!-- 飞手飞行时长 -->
      飞行动态
      <img class="icon" :src="getImageUrl('leftbg10.png')" alt="" />
    </h3>
    <!-- <div class="task-num">
      <div
        class="task-list"
        v-for="(item, index) in tableDataList"
        :key="item.id"
      >
        <div class="task-list-up">
          <div style="width: 25%; text-align: left">
            <span
              style="margin-right: 0.8vh; font-weight: 500"
              :style="index < 3 ? 'color:#00BEC2' : ''"
              >TOP{{ index + 1 }}</span
            >
            {{ item.name }}
          </div>
          <div style="width: 45%; text-align: left">{{ item.site }}</div>
          <div style="width: 30%; text-align: right">{{ item.time }}</div>
        </div>
        <div class="task-list-down">
          <ElProgress
            class="ElProgress"
            :percentage="item.percentage"
            :show-text="false"
          />
        </div>
      </div>
    </div> -->
    <div class="content_box">
      <ElTable :data="tableDataList" :row-class-name="tableRowClassName" :height="'100%'" style="width: 100%;"
        v-loading="loading">
        <ElTableColumn prop="airLineName" label="航线名称" />
        <ElTableColumn prop="flightType" label="飞行类型" />
        <ElTableColumn prop="distance" label="飞行距离(km)" />
        <ElTableColumn prop="startTime" label="起飞时间" />
        <ElTableColumn prop="endTime" label="降落时间" />
      </ElTable>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElTable, ElTableColumn } from "element-plus";
import { ref, onMounted, defineProps, toRef } from "vue";
import { ElProgress } from "element-plus";
const props = defineProps({ tableDataList: Array, loading: Boolean });
const getImageUrl = (name: string) => {
  return new URL(`../../../../../assets/${name}`, import.meta.url).href;
};
// const tableData = toRef(props.tableDataList)
// console.log(tableData)
// const tableData = ref([
//   {
//     "name": "巡检航线1",
//     "type": "一键起飞",
//     "distance": "3.21",
//     "takeOff_time": "2025-09-23 12:33:33",
//     "land_time": "2025-09-23 12:33:33"
//   },
//   {
//     "name": "巡检航线2",
//     "type": "手动起飞",
//     "distance": "3.21",
//     "takeOff_time": "2025-09-23 12:33:33",
//     "land_time": "2025-09-23 12:33:33"
//   },
//   {
//     "name": "巡检航线1",
//     "type": "一键起飞",
//     "distance": "3.21",
//     "takeOff_time": "2025-09-23 12:35:39",
//     "land_time": "2025-09-23 12:35:39"
//   },
//   {
//     "name": "巡检航线2",
//     "type": "手动起飞",
//     "distance": "3.21",
//     "takeOff_time": "2025-09-23 12:33:33",
//     "land_time": "2025-09-23 12:33:33"
//   },
//   {
//     "name": "巡检航线1",
//     "type": "一键起飞",
//     "distance": "3.21",
//     "takeOff_time": "2025-09-23 12:33:33",
//     "land_time": "2025-09-23 12:33:33"
//   },
//   {
//     "name": "巡检航线2",
//     "type": "手动起飞",
//     "distance": "3.21",
//     "takeOff_time": "2025-09-23 12:35:39",
//     "land_time": "2025-09-23 12:35:39"
//   },
//   {
//     "name": "巡检航线1",
//     "type": "一键起飞",
//     "distance": "3.21",
//     "takeOff_time": "2025-09-23 12:33:33",
//     "land_time": "2025-09-23 12:33:33"
//   },
//   {
//     "name": "巡检航线2",
//     "type": "手动起飞",
//     "distance": "3.21",
//     "takeOff_time": "2025-09-23 12:33:33",
//     "land_time": "2025-09-23 12:33:33"
//   }
// ])
const tableRowClassName = (data) => {
  return data.rowIndex % 2 == 0 ? 'bg-row' : ''
}
</script>

<style lang="scss" scoped>
.block-box {
  height: 44vh;
  background: rgb(2 19 20 / 52%);
  border: 1px solid;
  border-image: radial-gradient(circle,
      rgb(36 229 241 / 17%),
      rgb(255 255 255 / 17%)) 1 1;
  position: relative;
  margin-top: 0.5vh;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0px;
    width: 22px;
    height: 22px;
    border-top: 1px solid #24e5f1;
    opacity: 0.4;
  }

  &::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 22px;
    height: 22px;
    border-top: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .corner-lb {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid #24e5f1;
    border-left: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .corner-rb {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid #24e5f1;
    border-right: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .task-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4vh;
    padding-left: 1.5vh;
    margin: 0;
    font-family: PingFangSC, "PingFang SC";
    font-size: 2vh;
    font-weight: 500;
    color: #fffefe;
    user-select: none;
    background: radial-gradient(ellipse 140% 300% at 100% 50%,
        rgba(1, 34, 35, 0.2) 28%,
        rgba(7, 217, 221, 0.7) 100%);

    .icon {
      width: 3vh;
      margin-right: 1vw;
    }
  }

  .task-num {
    height: 49vh;

    .task-list {
      padding: 0.5vh 1vw;
      margin-top: 2vh;

      .task-list-up {
        display: flex;
        align-items: center;
        text-align: center;
        font-size: 1.7vh;
      }

      .task-list-down {
        padding-top: 0.5vh;

        .ElProgress {
          :deep(.el-progress-bar__outer) {
            border-radius: 0;
            // background: radial-gradient(ellipse 140% 300% at 100% 50%, rgba(36, 38, 50, 0.2) 28%, rgba(36, 38, 50, 0.7) 100%);
            background: rgb(36, 38, 50);
            height: 1vh !important;
          }

          :deep(.el-progress-bar__inner) {
            border-radius: 0;
            background: radial-gradient(ellipse 100% 150% at 100% 50%,
                rgba(36, 229, 241, 1) 28%,
                rgba(36, 229, 241, 0) 100%);
            height: 1vh !important;
          }

          :deep(.el-progress__text) {
            font-size: 0.8vw !important;
            margin-left: 0.2vw;
            min-width: 2vw;
          }
        }
      }
    }
  }

  .content_box {
    height: calc(39vh - 1px);
    width: 100%;

    :deep(.el-table) {
      --el-table-border-color: transparent;
      background-color: transparent;
    }

    :deep(.el-table tr) {
      background-color: transparent;
    }

    :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
      background-color: transparent;
    }

    :deep(.el-table__row--striped) {
      background-color: transparent;
    }

    :deep(.el-table th.el-table__cell) {
      background-color: transparent;
      color: #FFFFFF;
    }

    :deep(.el-table .bg-row) {
      background: linear-gradient(90deg, rgba(0, 184, 187, 0.2) 0%, rgba(0, 184, 187, 0.1) 54%, rgba(4, 187, 193, 0) 100%)
    }

    :deep(.el-table td.el-table__cell div) {
      color: #FFFFFF;
    }

    :deep(.el-table thead) {
      color: #24e5f1;
    }
  }
}
</style>
